$width : 50px;

.CityList {
    width: 100vw;
    max-width: 750px;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .cityItem {
        width: 100%;
        font-size: 24px;
        color: #ffffff;
        // background-color: rgba($color: #88a9ca, $alpha: .7);
        height: 90px;
        overflow: hidden;
        position: relative;
        margin-bottom: 2px;
        background-repeat: no-repeat;
        background-position: center;

        .wrap {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            transition: .3s linear;
        }

        .delete.wrap {
            left: -$width;
        }

        .container {
            padding: 0 20px;
            justify-content: space-between;
            min-width: 100vw;
            max-width: 750px;
            height: 100%;
        }


        .deleteBtn {
            background-color: rgba($color: #e3333a, $alpha: .9);
            width: $width;
            text-align: center;
            border: none;
            outline: none;
            font-size: 18px;
        }

        .time {
            font-size: 14px;

            >span {
                margin-right: 5px;
            }
        }

        .tem {
            font-size: 30px;
        }

    }

    .btnBox {
        height: 50px;
        background-color: rgba($color: #000000, $alpha: .2);
        color: #ffffff;
        font-size: 30px;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        >p {
            font-size: 16px;
        }
    }
}